<template>
	<div ref="Wrap" class="Wrap" v-if="slideList.length">
		<div class="slideWrap"ref="slideWrap" >
			<a :key="index" v-for="(item,index) in slideList" :href="item.url"><img :src="item.pic" alt="" /></a>
		</div>
		<div class="dots">
      		<div class="dotsWrap">
      			<span class="dot" v-for="(item, index) in dots" :class="{active:index===currentIndex}"></span>
      		</div>
    	</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import Bscroll from 'better-scroll';
	export default {
		data(){
			return {
				currentIndex:0,
				slideList:[],
				dots:[]
				
			}
		},
		created(){
			this._getSlide()
  		},
  		mounted(){
//			this._initSlide()
  		},
	  	methods:{
	  		_getSlide(){
				axios.get('/x/web-show/res/loc',{
					params:{
						jsonp:'jsonp',
						pf:7,
						id:1695
					}
				}).then((res)=>{
					this.slideList=res.data.data;
//					console.log(this.slideList)
				})
				.then(()=>{
//					console.log('init')
					setTimeout(()=>{
						this._setWidth();
						this._initSlide();
					},20)
					this._initDots();
				})
				window.addEventListener("resize",()=>{
					if(!this.slide){return}
					clearTimeout(this.resizeTimer)
					this.resizeTimer=setTimeout(()=>{
						if (this.slide.isInTransition) {
				            this._onScrollEnd()
			          	} else {
//				            if (this.autoPlay) {
				              this._play()
//				            }
			          	}
						this.refresh()
					},20)
				})
			
	  	},
	  	refresh(){
	  		if(this.slide){
	  			this._setWidth();
				this._initSlide();
	  		}
	  	},
	  	_initSlide(){
	  		if(!this.slide){
	  			this.slide = new Bscroll(this.$refs.Wrap,{
	  			  scrollX: true,
		          scrollY: false,
		          momentum: false,
		          snap: {
		            loop: true,
		            threshold: 0.3,
		            speed: 400
		          }
	  		})
	  			this.slide.on("scrollEnd",this._onScrollEnd)
				this._play()
	  			this.slide.on('touchend', () => {
//	          	if (this.autoPlay) {
		            this._play()
//	          	}
		        })
		
		        this.slide.on('beforeScrollStart', () => {
//		          if (this.autoPlay) {
		            clearTimeout(this.timer)
//		          }
		        })
	  		}else{
		  		this.slide.refresh()
	  		}

	  	},
	  	_onScrollEnd() {
	        let pageIndex = this.slide.getCurrentPage().pageX
	        this.currentIndex = pageIndex
//	        if (this.autoPlay) {
	          this._play()
//	        }
      	},
	  	_setWidth(){
	  		const _width=this.$refs.Wrap.clientWidth;
	  		const slideWrap=this.$refs.slideWrap;
	  		let step=0;
	  		for(let i=0;i<slideWrap.children.length;i++){
	  			slideWrap.children[i].style.width=_width+"px";
	  			step+=_width;
	  		}
	  			step+=2*_width;
	  		slideWrap.style.width=step+"px";
	  	},
	  	_initDots() {
        	this.dots = new Array(this.$refs.slideWrap.children.length)
  		},
  		 _play() {
	        clearTimeout(this.timer)
	        this.timer = setTimeout(() => {
	          this.slide.next()
	        }, 2000)
	      	}
  		 
	  	}
	}
</script>

<style lang="scss" type="text/css">
	@import "~@/common/scss/common";
	.Wrap{
		position: relative;
		width: 100%;
		overflow: hidden;
	}
	.slideWrap{
		position: relative;
		font-size: 0;
		white-space: nowrap;
		overflow: hidden;
		a{
			display: inline-block;
			width: 100%;
			img{
				display: block;
				width: 100%;
			}
		}
	}
	 .dots{
      position: absolute;
      right: 0;
      left: 0;
      bottom: 12px;
      transform: translateZ(1px);
      text-align: center;
      font-size: 0;
      .dotsWrap{
      	display: inline-block;
      	background-color: rgba(0,0,0,.5);
      	padding: 0 4px;
      	border-radius: 3px;
      }
      .dot{
        display: inline-block;
        margin: 0 4px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #fff;
        &.active{
          background: $maincolor;
        }
      }
    }
</style>